<template>
    <div id="login_warp" class="login_warp bg">
      <div class="admin-login-background">
        <div class="layui-form login-form">
          <div class="layui-form-item logo-title">
            <h1>工作流后台登录</h1>
          </div>
          <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
            <el-form-item prop="username">
              <div class="txtb">
                <span class="iconfont">&#xe62f;</span>
                <el-input v-model="loginForm.username" type="text" placeholder="请输入用户名" autocomplete="off" :class="{ focus: add }" @focus="add = true" @blur="add = loginForm.username === '' ? false : true" />
              </div>
            </el-form-item>
            <el-form-item prop="password">
              <div class="txtb">
                <span class="iconfont">&#xe611;</span>
                <el-input :key="passwordType" v-model="loginForm.password" autocomplete="off" placeholder="请输入用密码" :type="passwordType" :class="{ focus: add1 }" @focus="add1 = true" @blur="add1 = loginForm.password === '' ? false : true" />
              </div>
            </el-form-item>
            <el-form-item class="no-margin">
              <el-checkbox v-model="checked">记住密码</el-checkbox>
            </el-form-item>
            <el-form-item>
              <el-button class="loginbtn" :loading="loading" @click="handleLogin">{{ loginText }}</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    name: 'Login',
    data() {
      return {
        loginForm: {
          username: 'bajie',
          password: '1'
        },
        loginRules: {
          username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
          password: [{ required: true, message: '请输入密码', trigger: 'blur', validator: '' }]
        },
        checked: false,
        loading: false,
        passwordType: 'password',
        redirect: undefined,
        loginText: '登录',
        add: false,
        add1: false,
        identifyCode: '',
        identifyCodes: '1234567890'
      }
    },
    watch: {},
    created() {},
    mounted() {
      // this.$store.dispatch('mapModular/initMapModular')
    },
    methods: {
      handleLogin() {
        this.$refs.loginForm.validate((valid) => {
          if (valid) {
            this.loading = true
            this.loginText = '登录中...'
            this.$store
              .dispatch('user/login', this.loginForm)
              .then((data) => {
                console.log('登录接口：', data)
                sessionStorage.setItem('roleId', Number(data.userTypeId))
                // if (data.userTypeId === 101) {
                //   this.$router.push({ path: '/' })
                // } else {
                //   this.$router.push({ path: '/backstage/RiskEnterprise' })
                // }
                this.$router.push({path: '/complex'})
                this.loading = false
                this.loginText = '已登录'
              })
              .catch(() => {
                this.loading = false
                this.loginText = '登录'
              })
          } else {
            console.log('验证失败')
            return false
          }
        })
      }
    }
  }
  </script>
  
  <style scope>
  @import '~@/assets/styles/login.scss';
  .admin-login-background {width:460px;position:absolute;left:50%;top:40%;margin-left:-230px;margin-top:-100px;}
  .logo-title {text-align:center;letter-spacing:2px;padding:14px 0;}
  .logo-title h1 {color:#1E9FFF;font-size:25px;font-weight:bold;}
  .login-form {background-color:#fff;border:1px solid #fff;border-radius:3px;padding:14px 20px;box-shadow:0 0 8px #eeeeee;}
  </style>
  